<template>
  <p>{{ count }}</p>
  <button @click="update">update</button>
  <A />
  <p>{{ state.password }}</p>
  <p>{{ props.age }}</p>
  <button @click="emit('say')">say</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Child",
  // ...
});
</script>

<script lang="ts" setup>
import {
  ref,
  reactive,
  onMounted,
  computed,
  watch,
  defineProps,
  defineEmits,
  nextTick,
} from "vue";
import A from "./A.vue";

const props = defineProps({
  age: {
    type: Number,
  },
});

const emit = defineEmits(["say"]);

const count = ref<number>(0);
const state = reactive({
  username: "aa",
  password: "bbb",
});

const update = () => {
  count.value++;
};
</script>
